<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ChatBox</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

    <!-- and it's easy to individually load additional languages -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>

    <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <!--图标库-->
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4481751_q500f4lixs.css">
    <link href="/chat/css/index.css" rel="stylesheet">
    <link rel="icon" href="/chat/image/favicon.ico" type="image/x-icon">
</head>
<body>
<div class="container">
    <div id="banner">
        <span class="iconfont icon-chacha close" onclick="closeParent(this)"></span>
        <div class="search-bar">
            <input type="text" class="form-control" id="search" placeholder="">
        </div>
        <div id="information">
            <div id="user-info">
                <img id="search-user-head" src="" alt="头像">
                <div>
                    <span id="search-user-petName"></span>
                    <span id="search-user-username"></span>
                    <span id="search-user-userId"></span>
                </div>
                <button type="button" id="addFriendButton"></button>
            </div>
        </div>
    </div>
    <div id="inputGroupName">
        <span class="iconfont icon-chacha close" onclick="closeParent(this)"></span>
        <div class="search-bar">
            <input type="text" class="form-control" id="groupName" placeholder="">
        </div>
    </div>
    <div id="main" class="col-md-12 col-sm-12 col-lg-12 container">
        <div class="row">
            <div id="navbar">
                <img th:src="${session.user.getHeadImage() == null ? 'image/user.png' : session.user.getHeadImage()}"
                     class="user-head-icon" alt="头像" onclick="headbar()" id="navbar-userHead">
                <span class="iconfont icon-haoyouliebiao icon-navbar" title="好友列表"
                      onclick="reloadFriendList()"></span>
                <span class="iconfont icon-24gl-bubbles4 icon-navbar" id="group" title="群聊" onclick="reloadGroupList()"></span>
                <span class="iconfont icon-rengongzhineng icon-navbar" title="AI君" onclick="openAI()" id="openAI"></span>
                <div id="navbar-morebar">
                    <ul id="navbar-more-items">
                        <li class="navbar-more-item-first" onclick="displayBanner('addFriend')">添加好友</li>
                        <li class="navbar-more-item" onclick="displayBanner('joinGroup')">加入群组</li>
                        <li class="navbar-more-item" onclick="createGroup()">创建群组</li>
                        <li class="navbar-more-item" onclick="getSystemMessage()">系统消息</li>
                        <li class="navbar-more-item" onclick="logout()">退出登录</li>
                    </ul>
                </div>
                <span class="iconfont icon-gengduo1" id="navbar-more" title="更多" onclick="more()"></span>
                <div id="head-bar">
                    <img th:src="${session.user.getHeadImage() == null ? 'image/user.png' : session.user.getHeadImage()}"
                         class="user-head-icon" id="userHead" style="margin-top: 10px" alt="头像" title="更换头像"
                         onclick="selectImage()">
                    <input type="file" id="selectHeadImage" accept="image/jpeg, image/jpg, image/png" size="1048576">
                    <div><span class="user-message">用户ID: [[${session.user.userid}]]</span></div>
                    <div><span class="user-message">用户名: [[${session.user.username}]]</span></div>
                    <div><span class="user-message" style="vertical-align: middle">昵&nbsp;&nbsp;&nbsp;&nbsp;称: <span onclick="replacePetname(this)" style="vertical-align: middle;display: inline-block; width: 130px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">[[${session.user.petName}]]</span></span>
                    </div>
                    <input type="hidden" th:value="${session.user.petName}" id="petName">
                </div>
            </div>
            <div id="middle-bar">
                <div class="search-bar">
                    <input type="text" class="form-control search" placeholder="搜索好友" oninput="searchList(this)">
                </div>
                <div id="middle-list">
                    <ul class="list-group" id="list">
                        <li class="list-group-item middle-list-item" onclick="display(this)"
                            th:each="friend:${friendList}">
                            <img th:src="${friend.getHeadImage() == null ? 'image/user.png' : friend.getHeadImage()}"
                                 th:id="${friend.getUserid() + '-head'}" class="middle-user-head" alt="头像">
                            <div class="middle-message" th:with="msg=${newMessage.get(friend.userid.toString())}">
                                <input type="hidden" name="friendid" th:value="${friend.userid}">
                                <input type="hidden" name="userid" th:value="${session.user.userid}">
                                <span class="middle-petname" th:text="${friend.petName}">用户昵称</span>
                                <span class="middle-chat-time" id="middle-chat-time"
                                      th:text="${msg == null ? '' : msg.getDateFormat().split('-')[1]}"></span> <br>
                                <span class="middle-chat-content"
                                      th:id="${friend.userid}" th:text="${msg == null ? '' : msg.message}"></span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="chat-bar">
                <div id="head">
                    <span id="flexible" class="iconfont icon-fangxiangjiantou" aria-hidden="true"
                          onclick="hideMiddleBar()"></span>
                    <span id="chat-name">会话名称</span>
                    <span id="aiTip">AI对话数据保存在本地,在公共计算机上使用本程序可以点击清除缓存按钮删除对话记录</span>
                    <input type="hidden" id="friendId" value="">
                    <input type="hidden" id="userId" th:value="${session.user.userid}">
                    <input type="hidden" id="messageType" value="nomal">
                    <input type="hidden" id="role" value="">
                    <input type="hidden" id="messageSize" value="">
                    <input type="hidden" id="page" value="0">
                    <span id="groupId"></span>
                    <span class="iconfont icon-gengduo1" id="chat-bar-head-more" onclick="menuOption()"></span>
                    <button type="button" class="btn btn-secondary" onclick="clearLocalStorage()" id="clearLocalStorage">清除缓存</button>
                    <div id="nomalMenu">
                        <ul class="menubar">
                            <li class="menu-item-first" onclick="exportMessage()">导出记录</li>
                            <li class="menu-item" onclick="deleteFriend()">删除好友</li>
                        </ul>
                    </div>
                    <div id="groupMenu">
                        <ul class="menubar" style="width: 80px">
                            <li class="menu-item-first" onclick="getGroupMember()">查看群成员</li>
                            <li class="menu-item" id="deleteGroup"></li>
                            <li class="menu-item" id="modifyGroupName" onclick="modifyGroupName()">修改群名称</li>
                        </ul>
                    </div>
                </div>
                <div id="chat-view" class="container" onclick="drophide()">
                </div>
                <div id="chat-box">
                    <div id="tools-bar">
                        <div id="emojy">
                            <svg class="emojy-item" data-value="[中毒]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--astonished"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[天使]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--angel"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[中毒-1]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--astonished-"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[酷]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--cool"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[迷茫]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--confused"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[生气]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--angry"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[酷-1]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--cool-"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[头晕]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--dizzy"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[哭]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--cry"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[哭-1]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--cry-"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[面无表情]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--expressionless"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[魔鬼]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--devil"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[懵逼]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--flushed"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[开心-1]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--happy-"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[开心-2]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--happy-1"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[开心]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--happy"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[受伤]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--injury"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[笑哭]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--joy"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[热恋]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--in-love"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[亲吻]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--kiss"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[亲吻-2]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--kiss-"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[亲吻-1]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--kiss-1"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[口罩]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--mask"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[面无表情]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--neutral"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[静音]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--mute"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[难过]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--sad"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[难过-1]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--sad-"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[害怕]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--scared"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[闭嘴]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--secret"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[害怕-1]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--scared-"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[震惊-1]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--shocked"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[生病]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--sick"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[笑]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--smile"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[笑-1]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--smile-"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[睡觉]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--sleeping"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[微笑-1]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--smiling-"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[眼红]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--smiling"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[流汗]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--sweat"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[震惊]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--surprised"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[奸笑]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--smirking"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[思考]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--thinking"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[疲惫]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--tired"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[吐舌]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--tongue"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[吐舌-1]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--tongue-"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[吐舌-2]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--tongue-1"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[斜眼]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--unamused"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[眨眼]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--wink"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[呕吐]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--vomiting"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[僵尸]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--zombie"></use>
                            </svg>
                            <svg class="emojy-item" data-value="[呕吐-1]" aria-hidden="true" onclick="addEmojy(this)">
                                <use xlink:href="#icon--vomiting-"></use>
                            </svg>
                        </div>
                        <span type="button" class="iconfont icon-weixiao" onclick="dropup()"></span>
                        <p style="margin-top: 5px; margin-right: 20px; display: inline-block; font-size: 12px;">按下
                            <kbd>Ctrl</kbd>+<kbd>Enter</kbd> 进行换行</p>
                    </div>
                    <div id="chat-input">
                        <textarea class="input" id="input" contenteditable="true" onclick="drophide()">

                        </textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--模态框触发按钮-->
    <button type="button" id="tip" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    </button>
    <!-- 模态框 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel"></h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
<script src="/chat/js/jquery-min.js"></script>
<!--表情库-->
<script src="https://at.alicdn.com/t/c/font_4482189_fghshaxfrw8.js"></script>
<!--逻辑代码-->
<script src="/chat/js/index.js"></script>
<script>

    let wsUrl = "ws://43.134.32.234/chat/api/websocket/[[${session.user.userid}]]";
    // let wsUrl = "ws://localhost/chat/api/websocket/[[${session.user.userid}]]";
    let ws;
    window.onload = function () {
        document.querySelector(".input").value = "";
        document.querySelector("#chat-view").addEventListener("scroll", chatViewScorll)
        init();
    }

    function init() {
        refreshEmojy();

        ws = new WebSocket(wsUrl);

        ws.onopen = function () {
            console.log("与服务器连接成功")
        }

        ws.onmessage = function (event) {
            let message = JSON.parse(event.data);
            console.log(message)
            let msgType = message.messageType;
            //接收到普通消息
            if (msgType === "nomal") {
                //判断当前chat-view是否是该好友的窗口
                let friendId = document.querySelector("#friendId").value;
                if (parseInt(friendId) === message.from) {
                    //如果是那么就在该窗口显示
                    const chatView = document.querySelector("#chat-view");

                    chatView.innerHTML += `<div class="message-time">${message.dateFormat.replace("-", " ")}</div>`;

                    let friendHead = document.getElementById(friendId + "-head").src;

                    chatView.innerHTML += `<div class='col-md-12 chat-message'><img src='${friendHead}' class='middle-user-head' alt='头像'><div class='card'><div class='card-body'>${message.message}</div></div></div>`;
                    chatView.scrollTop = chatView.scrollHeight;
                    refreshEmojy()
                }
                //显示到好友列表位置中的对应最新消息栏
                let friendMessageBar = document.getElementById(message.from.toString());
                let time = friendMessageBar.previousSibling.previousSibling.previousSibling.previousSibling;
                time.innerText = `${message.dateFormat.split("-")[1]}`;
                //将换行符替换成空格
                friendMessageBar.innerText = message.message.replace(/\n/g, " ");
            }

            if (msgType === "group") {

                //判断当前chat-view是否是该群组的窗口
                let groupId = document.querySelector("#friendId").value;
                if (parseInt(groupId) === message.groupId) {
                    //如果是那么就在该窗口显示
                    const chatView = document.querySelector("#chat-view");

                    chatView.innerHTML += `<div class="message-time">${message.dateFormat.replace("-", " ")}</div>`;

                    chatView.innerHTML += `<div class='col-md-12 chat-message'><div id="senderPetName">${message.senderPetName}</div><img src='${message.senderHead}' class='middle-user-head' alt='头像'><div class='card sender'><div class='card-body'>${message.content}</div></div></div>`;
                    chatView.scrollTop = chatView.scrollHeight;
                    refreshEmojy()
                }
                //显示到好友列表位置中的对应最新消息栏
                let friendMessageBar = document.getElementById(message.from.toString());
                let time = friendMessageBar.previousSibling.previousSibling.previousSibling.previousSibling;
                time.innerText = `${message.dateFormat.split("-")[1]}`;
                friendMessageBar.innerText = message.message;
            }

            if (msgType === "friendRequest") {
                document.querySelector("#tip").click()
                document.querySelector("#exampleModalLabel").innerText = "系统提示"
                document.querySelector(".modal-body").innerHTML = "";
                document.querySelector(".modal-body").innerText = "你有一条新的好友申请,请在系统消息中查看"
            }

            if (msgType === "joinGroupRequest") {
                document.querySelector("#tip").click()
                document.querySelector("#exampleModalLabel").innerText = "系统提示"
                document.querySelector(".modal-body").innerHTML = "";
                document.querySelector(".modal-body").innerText = "你有一条新的入群申请,请在系统消息中查看"
            }
        }

        ws.onclose = function () {
            init();
        }

        hideMenu();

    }
</script>
</body>
</html>